<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <link rel="stylesheet" href="${ctx }/res/css/mycart.css">
    <script type="text/javascript" src="${ctx }/res/js/lib.js"></script>
    <script type="text/javascript" src="${ctx }/res/js/jquery.SuperSlide.js"></script>
    <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
    <script type="text/javascript" src="${ctx }/res/js/jquery.scrollLoading.js"></script>
    <script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
	<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
    <style type="text/css">
    	.picLeftLoop .sNext {
		    float: right;
		    width: 11px;
		    height: 180px;
		    overflow: hidden;
		    cursor: pointer;
		    background: url(${ctx}/res/img/icon/pn.png) no-repeat right center;
		    margin: 0 8px 0 16px;
		}
		
		.picLeftLoop .sPrev {
		    float: left;
		    width: 11px;
		    height: 180px;
		    overflow: hidden;
		    cursor: pointer;
		    background: url(${ctx}/res/img/icon/pn.png) no-repeat left center;
		    margin: 0 16px 0 8px;
		}
		
		.layui-layer-dialog .layui-layer-content {
			color:black;
		}
    </style>
    <title>软装到家</title>
</head>
<body>
 <!--顶部工具条-->
<div class=" w-100p mini-top-bar">
    <div class="w-1200 margin-0-auto">
        <ul class="nav-left fl">
            <li class="home"><a href="${ctx }">达达订货首页</a></li>
           <c:choose>
	        	<c:when test="${currentUser == null}">
	        		<li class="login"><a href="${ctx}/user/login">登录</a></li>
            		<li class="register"><a href="${ctx }/user/register">注册</a></li>
	        	</c:when>
	        	<c:otherwise>
	        		<li class="login" style="color:black;">欢迎您,${currentUser.realName }!<span style="color:blue;cursor:pointer" onclick="javascript:location.href='j_spring_security_logout'">【退出登录】</span></li>
	        	</c:otherwise>
        	</c:choose>
        </ul>
        <ul class="nav-right fr">
            <li class="order"><a href="${ctx }/admin/index?target=/order/myOrder">我的订单</a></li>
            <li class="account"><a href="${ctx }/admin/index">个人中心</a></li>
            <li class="downapp"><a href="#">下载APP</a></li>
        </ul>
    </div>
</div>
<!--logo 和tags-->
<div class="w-1200 sub-nav margin-0-auto">
    <a class="logo" href="#"><img src="${ctx }/res/img/icon/logo_mycart.png"></a>
     <div class="searchbar-warp-min" style="float:right">
         <div class="searchbar">
             <form>
                 <span class="icon-serach"></span>
                 <input class="serach-input" type="text" value="沙发" placeholder="请输入关键字">
                 <button class="serach-btn" type="submit">搜索</button>
             </form>
         </div>
    </div>
</div>
<!--购物车-->
<div class="catbox">
	<table>
		<thead>
			<tr>
                <th align="left" style="padding-left:15px; width:150px"><label class="radio-elem"><input class="check-all-cart" type="checkbox"><i class="radio-icon"></i>全选</label></th>
				<th class="t2" align="left">商品信息</th>
				<th class="t3">单价（元）</th>
				<th class="t4">数量</th>
				<th class="t5">金额（元）</th>
				<th class="t6" align="left">操作</th>
			</tr>
		</thead>
	</table>
	<c:forEach items="${userCarts }" var="n" varStatus="idx">
		<table class="cartTable">
			<thead>
	            <tr>
					<th colspan="7" style="background:#fff; padding-left:15px" align="left">
	                	<%-- <font style="float:left;line-height:30px"><label class="radio-elem"><input class="check-all check" type="checkbox"/></label>店${idx.index+1 }：${n.user.realName }</font> --%>
		                <font class="th_l">
	                    	<div class="select-d"><label class="radio-elem"><input class="check-all check" type="checkbox"><i class="radio-icon"></i>${n.brand.name}</label></div>
	                    </font>
	                    <font class="th_l" style="padding:0 15px"><img src="${n.brand.image }"/></font>
	                    <a href="tencent://message/?uin=3448878138" target="_blank">
	                        <font class="th_l"><img src="${ctx }/res/img/icon/qq.png"/></font>
	                        <font class="th_l" style="font-size:18px; color:#808080">联系卖家</font>
	                    </a>
	                </th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${n.cartList }" var="c" varStatus="stat">
		            <tr class="cart_tr" value="${c.id }">
						<td class="checkbox t1">
							<label class="radio-elem check_ml"><input class="check-one check" value="${c.id }" type="checkbox"/><i class="radio-icon"></i></label>
							<img style="cursor:pointer;" src="${c.product.headImage }" onclick="clickShowDetail(${c.product.id},${c.specification.id})" />
						</td>
						<td class="goods t2">
		                	<div class="tl">
		                    	<h1><a onclick="clickShowDetail(${c.product.id},${c.specification.id})">${c.product.name }</a></h1>
		                    </div>
		                    <div class="tr">颜色分类：${c.specification.spec2 }${c.specification.spec1 }</div>
		                </td>
		                
		                <td class="price t3">
			                <c:if test="c.specification.marketPrice != null">
			                	<font class="yj">¥${c.specification.marketPrice }</font><br />
			                </c:if>
							<font class="trueprice">¥<fmt:formatNumber value="${c.specification.realPrice }" type="currency" pattern="0.00"/></font>
						</td>
						<td class="t4"><div class="count"><span class="reduce">-</span><input class="count-input" type="text" value="${c.quantity }"/><span class="add">+</span></div></td>
						<td class="subtotal t5">¥<fmt:formatNumber value="${c.specification.realPrice*c.quantity }" type="currency" pattern="0.00"/></td>
						<td class="operation t6">
							<!-- <span>移入收藏夹</span> -->
							<span class="delete">删除</span>
						</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</c:forEach>
	<div class="catbox_foot" >
		<div class="fl">
        	<div class="select-all"><label class="radio-elem"><input class="check-all-cart check" type="checkbox"><i class="radio-icon"></i>全选</label></div>
        </div>
		<div class="fl"><a id="deleteAll" href="javascript:;">删除</a></div>
        <div class="fl"><a href="#">清除失效宝贝</a></div>
        <div class="fl"><a href="#">移入收藏夹</a></div>
		<div class="fr">
        <div class="fl " id="selected">已选商品<span id="selectedTotal">0</span>件</div>
		<div class="fl total">合计（不含运费）：<font style="color:#f00658;font-weight:bold; font-size:20px;">¥</font><span id="priceTotal">0.00</span></div>
		<div class="closing" id="checkout" style="float:left">结 算</div>
        </div>
	</div>
</div>
<!--购物车 END-->
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<!--推荐-->
<!--推荐-->
<div class="w-1200 margin-0-auto">
    <div class="mycartTab">
        <div class="hd">
            <ul><li>为您推荐</li><li>最近浏览</li><li>我的收藏</li></ul>
        </div>
        <div class="bd">
            <div class="picLeftLoop">
                <a class="sPrev"></a>
                <div class="bd">
                    <ul>
                       <c:forEach items="${products}" var="p" varStatus="s">
                       	<li value="${p.id }" spec="${p.firstSpec.id }">
                            <a href="${ctx }/product/detail?id=${p.id}" target="_blank"><img src="${p.headImage }" /></a>
                            <div class="title"><a href="${ctx }/product/detail?id=${p.id}" target="_blank">${p.name }</a></div>
                            <div class="price">￥ <fmt:formatNumber value="${p.firstSpec.realPrice }" type="currency" pattern="0.00"/></div>
                            <div class="fl" style="color:#888">已售：${p.totalSold }</div>
                            <div class="mycart_btn"><a>加入购物车</a></div>
                        </li>
                       </c:forEach>
                    </ul>
                </div>
                <a class="sNext"></a>
            </div>
            <div class="picLeftLoop">
                <a class="sPrev"></a>
                <div class="bd">
                	<c:choose>
                		<c:when test="${latestRecord != null && fn:length(latestRecord) > 0 }">
                			<ul>
		                        <c:forEach items="${latestRecord}" var="p" varStatus="s">
		                       	<li value="${p.id }" spec="${p.firstSpec.id }">
		                            <a href="${ctx }/product/detail?id=${p.id}" target="_blank"><img src="${p.headImage }" /></a>
		                            <div class="title"><a href="${ctx }/product/detail?id=${p.id}" target="_blank">${p.name }</a></div>
		                            <div class="price">￥ <fmt:formatNumber value="${p.firstSpec.realPrice }" type="currency" pattern="0.00"/></div>
		                            <div class="fl" style="color:#888">已售：${p.totalSold }</div>
		                            <div class="mycart_btn"><a>加入购物车</a></div>
		                        </li>
		                       </c:forEach>
		                    </ul>
                		</c:when>
                		<c:otherwise>
                			<div style="font-size:25px;text-align:center;color:gray;">对不起，您还没有浏览记录，请进入商城进行商品查看</div>
                		</c:otherwise>
                	</c:choose>
                </div>
                <a class="sNext"></a>
            </div>
            <div class="picLeftLoop">
                <a class="sPrev"></a>
                <div class="bd">
                    <ul>
                        <c:forEach items="${products}" var="p" varStatus="s">
                       	<li value="${p.id }" spec="${p.firstSpec.id }">
                            <a href="${ctx }/product/detail?id=${p.id}" target="_blank"><img src="${p.headImage }" /></a>
                            <div class="title"><a href="${ctx }/product/detail?id=${p.id}" target="_blank">${p.name }</a></div>
                            <div class="price">￥ <fmt:formatNumber value="${p.firstSpec.realPrice }" type="currency" pattern="0.00"/></div>
                            <div class="fl" style="color:#888">已售：${p.totalSold }</div>
                            <div class="mycart_btn"><a>加入购物车</a></div>
                        </li>
                       </c:forEach>
                    </ul>
                </div>
                <a class="sNext"></a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
	jQuery(".picLeftLoop").slide({ mainCell:".bd ul",effect:"leftLoop",vis:"5",autoPlay:"true",prevCell:".sPrev",nextCell:".sNext"});
	jQuery(".mycartTab").slide({trigger:"click"});
</script>
<form id="cartForm" >
	<input type="hidden" id="cartInfo" name="cartInfo" value="" />
</form>



<!--推荐 END-->
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<%@include file="../foot.jsp" %>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
        $('#checkout').on('click',function() {
        	if($(this).hasClass("opening")) {
        		var checkboxes = $('.cart_tr .check-one');
        		var dataInfo = '';
        		var hasChoosen = false;
        		if(checkboxes.length> 0 ) {
        			for(var i = 0;i < checkboxes.length;i ++ ) {
               			var theCheck = $(checkboxes[i]);
               			if(theCheck.is(':checked')) {
               				var value = theCheck.attr("value");
                   			var latestInput = $(theCheck.parents('tr').find('.count-input')[0]);
                   			var inputValue = latestInput.val();
                   			dataInfo += value+'-'+inputValue+",";
                   			hasChoosen = true;
               			}
            		}
        		}
        		if(hasChoosen) {
        			$('#cartInfo').val(dataInfo);
           			$('#cartForm').attr('action','${ctx}/cart/checkout');
           			$('#cartForm').attr("method",'post');
           			$('#cartForm').submit();
        		} else {
        			layer.alert('请选择商品后再进行结算!',{icon:2,skin: 'layer-ext-moon'});
        		}
        	}
        });
        $('.mycart_btn').on('click',function() {
        	var li = $(this).parents("li");
        	var productId = li.attr("value");
        	var quantity = 1;
        	var specificationId = li.attr("spec");
        	var json = {};
        	json["productId"] = productId;
        	json["quantity"] = quantity;
        	json["specificationId"] = specificationId;
        	$.ajax({
        		url: "${ctx}/cart/addCart",
        		data:json,
        		dataType: "json",
        		type: "get",
        		success: function(data) {
        			if (data.success) {
        				//loading带文字
        				layer.msg('购物车添加成功!',{time: 1000, icon:6,shade: [0.5, '#f5f5f5']});
        				location.reload();
        			} else {
        				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
        			}
        		}
        	});
        });
    }); 
</script>
<!--购物车新增JS-->
<script type="text/javascript" src="${ctx }/res/js/mycart.js"></script>

</body>
</html>
